<!--
 * @Author: zheguo 3188606474@qq.com
 * @Date: 2024-04-17 08:09:34
 * @LastEditors: zheguo 3188606474@qq.com
 * @LastEditTime: 2024-04-24 11:05:46
 * @FilePath: \ProjectAction\projectOne\myapp\src\components\Shop_component\imgComponent.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEa
-->
<template>
    <div class="all_content">
        <div class="content_son">
            <div class="component_one">
                <div class="component_ul">
                    <ul>
                        <!-- <li v-for="item in store.textlist" :key="item">
                            <div>
                                <i :class="item.icon"></i>
                                <span> {{ item.text }}</span>
                            </div>
                        </li> -->
                        <router-link custom :to="item.path" v-slot="{ navigate }" v-for="item in store.textlist"
                            :key="item">
                            <li @click="navigate">
                                <div>
                                    <i :class="item.icon"></i>
                                    <span> {{ item.text }}</span>
                                </div>
                            </li>
                        </router-link>
                    </ul>
                </div>
                <div class="component_img">
                    <ul>
                        <li v-for="data in store.imgList" :key="data.imgId" @click="handleClick(data.filterId)">
                            <img :src="data.img" alt="" style="width: 100%;height: 100%;">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import useImgComponent from '../../store/Shop_store/imgComponent'
import { onMounted, onBeforeMount } from 'vue'
const store = useImgComponent()
import { useRouter } from 'vue-router';
const router = useRouter()
onBeforeMount(() => {
    if (store.textlist.length === 0) {
        store.getImgList()
    }
})

const handleClick = (id) => {
    router.push(`/shop/detail/${id}`)
}
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.all_content {
    margin-top: 20px;
    width: 100%;

    .content_son {
        width: 1200px;
        height: 230px;
        margin: 0 auto;

        .component_one {
            width: 1200px;
            height: 200px;
            // background: red;
            display: flex;
            justify-content: space-between;

            .component_ul {
                width: 250px;
                height: 200px;
                background: #5f5750;

                ul {
                    list-style: none;
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 83.33px;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 10px;
                        box-sizing: border-box;
                        color: #ccc;
                        position: relative;
                        cursor: pointer;

                        div {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            i {
                                font-size: 25px;
                            }

                            span {
                                font-size: 13px;

                            }
                        }
                    }

                    li:after {
                        position: absolute;
                        left: 83px;
                        content: "";
                        background: white;
                        width: 0.3px;
                        height: 70px;
                    }

                    li:before {
                        position: absolute;
                        bottom: -2px;
                        content: "";
                        background: white;
                        width: 70px;
                        height: 0.3px;
                    }

                    li:hover {
                        color: white;
                    }

                }
            }

            .component_img {
                width: 930px;
                height: 200px;
                float: right;

                ul {
                    list-style: none;
                    display: flex;
                    justify-content: space-between;

                    li {
                        width: 300px;
                        height: 200px;
                        cursor: pointer;
                    }

                    li:hover {
                        transition: box-shadow .2s linear;
                    }

                    @keyframes box-shadow {
                        0% {
                            box-shadow: 0 0;
                        }

                        100% {
                            box-shadow: 0 10px 22px #0e6eb8;
                        }
                    }
                }
            }
        }
    }
}
</style>